<template>
    <div class="box_add">
        <div class="content_add">
            <h3>事项添加</h3>
            <div class="add_img">
                <img :src="url_" alt="" v-if="url_ !== ''">
                <h4 v-else>待添加图片</h4>
                <div class="upload">
                    添加logo
                    <input type="file" @change="fil_($event)" id="file">
                </div>
            </div>
            <div contenteditable="true" class="edit" ref="edit">
            </div>
            <div class="choose">
                <button class="add" @click="listAdd">添加</button>
                <button @click="cancel">取消</button>
            </div>
        </div>
    </div>
</template>

<script>
import api from "@/api";
export default {
    name: "ItemAdded",
    data() {
        return {
            url_: "",
            files_: "",
        }
    },
    methods: {
        listAdd() {
            let _this = this;
            // 添加需要上传的文件
            const form = new FormData();
            if(this.files_ === ""){
                this.$store.commit("requestInfo", "图片不能为空");
                return "";
            }
            form.append('file', this.files_);
            form.append('content',this.$refs.edit.innerHTML);
             api.insertAdminLoveList(form).then((res)=>{
                   if(res.data.code === 200){
                       this.$store.commit("requestInfo", "新增事项成功");
                   }else {
                       this.$store.commit("requestInfo", "新增事项失败");
                   }
             })
            _this.cancel();
        },

        fil_(event) {
            this.url_ = this.echo(event)
            this.files_ = event.target.files[0];
        },
        echo(event) {
            //根据这个 <input> 获取文件的 HTML5 js 对象
            let files = event.target.files;
            let file;
            if (files && files.length > 0) {
                // 获取目前上传的文件
                file = files[0];
                // 那么我们可以做一下诸如文件大小校验的动作
                if (file.size > 1024 * 1024) {
                    this.$store.commit("requestInfo", "图片大小不能超过 3MB!");
                    return "";
                }
                let URL = window.URL || window.webkitURL;
                // 通过 file 生成目标 url
                return URL.createObjectURL(file);
            }
        },
        cancel() {
            this.url_ = ""
            this.files_ = "";
            this.$emit("cancel");
        }
    }
}
</script>

<style scoped>
.box_add {
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(82, 80, 80, 0.1);
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;

}

.content_add {
    border-radius: 2px;
    width: 400px;
    height: 300px;
    background: white;
    padding: 10px;
    box-shadow: 0 0 15px -1px #b9b8b8;
    animation: box_p 0.4s ease-in-out 0s 1 forwards;
}

@keyframes box_p {
    0% {
        transform: scale(0);
    }
    60% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

h4 {
    padding: 5px 0;
    margin-right: 20px;
    font-size: 14px;
}

h3 {
    font-weight: bold;
    text-align: center;
    padding: 5px 0;
}

.edit {
    outline: none;
    height: 150px;
    width: 100%;
    padding: 5px;
    background: rgba(133, 129, 129, 0.96);
    overflow: auto;
    word-break: break-all;
    letter-spacing: 1px;
    color: white;
}

.edit::-webkit-scrollbar {
    width: 10px;
}

.edit::-webkit-scrollbar-thumb {
    border-radius: 1px;
    background: #f1c3d5;
}

.edit::-webkit-scrollbar-track {
    border-radius: 0;
    background: #f9f9fc;
}

.add_img {
    display: flex;
    justify-content: left;
    align-items: center;
    width: 100%;
    height: 40px;
    background: rgba(230, 231, 232, 0.8);
}

.add_img img {
    width: 30px;
    height: 30px;
    margin: 0 20px;
}

.choose {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

button {
    padding: 8px 20px;
    outline: none;
    border: 0;
    background: #3586f1;
    cursor: pointer;
    color: white;
    border-radius: 2px;
    font-weight: 500;
    margin-top: auto;
}

.add {
    background: #f5ab24;
    margin-right: 20px;
}

button:hover {
    opacity: .8;
}

.upload {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 80px;
    height: 30px;
    background: #09b2ef;
    text-align: center;
    color: white;
    font-size: 13px;
    border-radius: 3px;
}

#file {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
}
</style>